<script setup lang="ts">
import Left from "./left.vue";
import Middle from "./middle.vue";
import Right from "./right.vue";
</script>
<template>
  <div class="land-wrap">
    <Left class="left" />
    <Middle class="middle" />
    <Right class="right" />
  </div>
</template>
<style lang="less" scoped>
.land-wrap {
  display: flex;
  width: 100%;
  height: 97%;
  .left {
    height: inherit;
    padding: 10px;
    box-sizing: border-box;
    flex: 0 0 26.23%;
  }
  .middle {
    flex: 1;
    height: inherit;
    padding: 10px 4px;
    box-sizing: border-box;
  }
  .right {
    padding: 10px;
    height: inherit;
    box-sizing: border-box;
    flex: 0 0 26.23%;
  }
}
// .land-wrap {
//   display: flex;
//   flex: 1;
//   height: 96.2%;
//   justify-content: space-evenly;
//   padding: 10px;
//   .left {
//     flex: 0 0 400px;
//     width: 400px;
//     height: 100%;
//     box-sizing: border-box;
//   }

//   .middle {
//     flex: 1;
//     box-sizing: border-box;
//   }
//   .right {
//     flex: 0 0 400px;
//     width: 400px;
//     height: 100%;
//     box-sizing: border-box;
//   }
// }
</style>
